<template>
  <div>
    <a-drawer
      title="设置"
      placement="left"
      :width="600"
      :visible="settingVisible"
      @close="close"
    >
      <a-form :form="settingForm" layout="horizontal">
        <a-divider orientation="left">画布</a-divider>
        <a-form-item
          label="缩小比例"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-slider
            :min="0.05"
            :max="0.5"
            :step="0.05"
            :tipFormatter="formatterContainerOnceNarrow"
            v-decorator="['containerOnceNarrow', {}]"
            @afterChange="setContainerOnceNarrow"
          />
        </a-form-item>
        <a-form-item
          label="放大比例"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-slider
            :min="0.05"
            :max="0.5"
            :step="0.05"
            :tipFormatter="formatterContainerOnceEnlarge"
            v-decorator="['containerOnceEnlarge', {}]"
            @afterChange="setContainerOnceEnlarge"
          />
        </a-form-item>

        <a-divider orientation="left">连线</a-divider>
        <a-form-item
          label="类型"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-select v-decorator="['linkType', {}]" @change="setFlowType">
            <a-select-option value="Bezier">贝塞尔曲线</a-select-option>
            <a-select-option value="Straight">直线</a-select-option>
            <a-select-option value="Flowchart">流程图线</a-select-option>
            <a-select-option value="StateMachine">状态线</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="颜色"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <colorPicker v-model="linkColor" @change="setLinkColor" />
        </a-form-item>
        <a-form-item
          label="粗细"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-slider
            :min="1"
            :max="10"
            v-decorator="['linkThickness', {}]"
            @afterChange="setStrokeWidth"
          />
        </a-form-item>

        <a-divider orientation="left">默认样式</a-divider>
        <a-form-item
          label="辅助线"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-switch
            :checked="isOpenAuxiliaryLine"
            v-decorator="['isOpenAuxiliaryLine', {}]"
            checkedChildren="开"
            unCheckedChildren="关"
            @change="toggleOpenAuxiliaryLine"
          />
        </a-form-item>
        <a-form-item
          label="自动对齐水平间距"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-slider
            :min="10"
            :max="800"
            :step="5"
            v-decorator="['alignLevelDistance', {}]"
            @afterChange="setAlignLevelDistance"
          />
        </a-form-item>
        <a-form-item
          label="自动对齐垂直间距"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-slider
            :min="10"
            :max="800"
            :step="5"
            v-decorator="['alignVerticalDistance', {}]"
            @afterChange="setAlignVerticalDistance"
          />
        </a-form-item>
        <a-form-item
          label="微移距离"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-slider
            :min="1"
            v-decorator="['movePx', {}]"
            @afterChange="setMovePx"
          />
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script>
import { flowConfig } from '@/utils/args-config'

export default {
  data () {
    return {
      settingVisible: false,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 15 },
      },
      initFlag: false,
      settingForm: this.$form.createForm(this),
      isOpenAuxiliaryLine: flowConfig.defaultStyle.isOpenAuxiliaryLine,
      linkColor: flowConfig.jsPlumbInsConfig.PaintStyle.stroke,
    }
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.settingForm.setFieldsValue({
          movePx: flowConfig.defaultStyle.movePx,
          linkType: flowConfig.jsPlumbInsConfig.Connector[0],
          linkThickness: flowConfig.jsPlumbInsConfig.PaintStyle.strokeWidth,
          alignLevelDistance: flowConfig.defaultStyle.alignSpacing.level,
          alignVerticalDistance: flowConfig.defaultStyle.alignSpacing.vertical,
          containerOnceNarrow:
            flowConfig.defaultStyle.containerScale.onceNarrow,
          containerOnceEnlarge:
            flowConfig.defaultStyle.containerScale.onceEnlarge,
        })
      })
    },
    open () {
      this.settingVisible = true
      if (!this.initFlag) {
        this.init()
        this.initFlag = true
      }
    },
    close () {
      this.settingVisible = false
    },
    setFlowType (v) {
      flowConfig.jsPlumbInsConfig.Connector[0] = v
    },
    toggleOpenAuxiliaryLine (flag) {
      this.isOpenAuxiliaryLine = flag
      flowConfig.defaultStyle.isOpenAuxiliaryLine = flag
    },
    setMovePx (v) {
      flowConfig.defaultStyle.movePx = v
    },
    setLinkColor (v) {
      this.linkColor = v
      flowConfig.jsPlumbInsConfig.PaintStyle.stroke = v
    },
    setStrokeWidth (v) {
      flowConfig.jsPlumbInsConfig.PaintStyle.strokeWidth = v
    },
    setAlignLevelDistance (v) {
      flowConfig.defaultStyle.alignSpacing.level = v
    },
    setAlignVerticalDistance (v) {
      flowConfig.defaultStyle.alignSpacing.vertical = v
    },
    formatterContainerOnceNarrow (v) {
      return `${v * 100}%`
    },
    setContainerOnceNarrow (v) {
      flowConfig.defaultStyle.containerScale.onceNarrow = v
    },
    formatterContainerOnceEnlarge (v) {
      return `${v * 100}%`
    },
    setContainerOnceEnlarge (v) {
      flowConfig.defaultStyle.containerScale.onceEnlarge = v
    },
  },
}
</script>

<style>
.m-colorPicker .box {
  z-index: 9999 !important;
  width: 220px !important;
}

.ant-divider-horizontal.ant-divider-with-text,
.ant-divider-horizontal.ant-divider-with-text-left,
.ant-divider-horizontal.ant-divider-with-text-right {
  font-weight: 800;
  margin: 24px 0 4px;
}
</style>
